<template>
  <el-drawer title="列设置" :visible.sync="visible" size="450px">
    <div class="table-main">
      <el-table :data="settingColumns" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
        <el-table-column prop="label" align="center" label="列名" />
        <el-table-column prop="hidden" align="center" label="隐藏" v-slot="{ row }">
          <el-switch v-model="row.hidden" @change="(val) => handleChange(row)"></el-switch>
        </el-table-column>
        <el-table-column prop="sortable" align="center" label="排序" v-slot="{ row }">
          <el-switch v-model="row.sortable" @change="(val) => handleChange(row)"></el-switch>
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <div>暂无可配置列</div>
          </div>
        </template>
      </el-table>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'ColumnsSetting',
  props: {
    // 表格列
    settingColumns: {
      type: Array,
      default: () => ([])
    },
	},
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    // 打开设置列弹窗
    showDialog() {
      this.visible = true
    },
    // 关闭设置列弹窗
    closeDialog() {
      this.visible = false
    },
    handleChange(col) {
      this.$emit("change", col)
    }
	}
};
</script>

<style>
</style>